<template>
    <div class="tablePage">
      <el-table :data="pageData.records" stripe style="width: 100%"
      table-layout="fixed"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column fixed type="selection" width="55" /> -->
        <el-table-column label="序号" type="index" width="70" />
        <el-table-column prop="id" label="id" width="80" v-if="false"/>
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="dynasty" label="朝代" width="100" />
        <el-table-column prop="dynastyTitle" label="庙号" width="100" />
        <el-table-column prop="reignTitle" label="年号" width="100" />
        <el-table-column prop="mausoleum" label="陵墓" width="100" />
        <el-table-column prop="dateOfBirth" label="birth" width="70" />
        <el-table-column prop="dateOfDeath" label="death" width="70" />
        <el-table-column prop="introduction" label="introduction" :formatter="stateFormat"/>
        <el-table-column label="Operations" fixed="right" width="220">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="small" type="primary" @click="handleDetails(scope.$index, scope.row)"
              >大事件</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDeleteCheck(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center" style="padding: 10px; 0">
        <el-pagination background 
        v-model:current-page="pageData.current"
        v-model:page-size="pageData.size"
        :page-sizes="[20, 50, 100]"
        :total="pageData.total"
        layout="total, sizes, prev, pager, next" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
      </div>
    </div>

</template>

<script lang="ts" setup>
import { ref,reactive,toRefs  } from "vue";
import axios from '@/request'
import {PageType} from '@/type/PageData'
import {ruleForm} from '@/type/LearnMenu'
import api from '@/api/index'
import { ElTable, ElMessage, ElMessageBox, genFileId } from 'element-plus'

const centerDialogVisible = ref(false)
const value = ref('')
const parentDisable = ref(false)

interface Params{
  current: number,
  size: number,
}

const params = {
  current: 1,
  size:20
}
const pageData: PageType = reactive(new PageType())
function getDataList (path?:String, params?:Params){
// 请求需要的参数
  const _path: string = path as string;
//   console.log(_path);
  const parms = axios.get<PageType>(_path,params);
  parms.then((res)=>{
    // console.log(res.data);
    pageData.current = res.data?.current;
    pageData.size = res.data?.size
    pageData.total = res.data?.total
    pageData.records = res.data?.records
  });
}
const refreshTableView = () => {
  refresh();
}
// 第二步：暴露方法
defineExpose({ refreshTableView })
const refresh = () => {
  getDataList(api.emperor, params);
}

refresh();

// 分页用的
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<ruleForm[]>([])
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
}

const handleSizeChange = (val: number) => {
  params.size = val;
  refresh();
}
const handleCurrentChange = (val: number) => {
  params.current = val;
  refresh();
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
// 编辑按钮
const emit = defineEmits(["editRecord", "editVitae"]);
const handleEdit = (index: number, row: ruleForm) => {
  emit('editRecord', row.id);
}
// 删除按钮
const handleDeleteCheck = (index: number, row: ruleForm) => {
  ElMessageBox.confirm(
    '确认删除该条记录吗？',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      handleDelete(index,row);
    })
    .catch(() => {})
}
const handleDelete = (index: number, row: ruleForm) => {
  const url = api.emperor + "/"+ row.id
  const parms = axios.delete(url)
  parms.then((res)=>{
    if(res.msg == "success"){
      ElMessage({
        message: '删除成功.',
        type: 'success',
      })
      // 刷新页面
      refresh();
    }else {
      ElMessage.error('提交失败.')
    }
  })
}
// 编辑大事件详情
const handleDetails = (index: number, row: ruleForm) => {
  // console.log(row);
  emit('editVitae', row);
}

function stateFormat(row: number, column: number, cellValue: String) {
    // console.log(row , column , cellValue)
    if (!cellValue) return "";
    if (cellValue.length > 20) {
    //最长固定显示4个字符
    return cellValue.slice(0, 20) + "...";
    }
    return cellValue;
}
</script>